/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Table, TableBody, TableRow, Text, BlobInputList, TableHead,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet, } from "../../../common/tool";
import {useOmnipotentPrefItspe, useOmnipotentPrefTitle,} from "../../hook/useOmnipotentPref";
import {tail注解} from "./orcBase";

/*【注意】配置耦合性： 允许动态修改的配置。
* */
export const setConfig水质 =(orc:any)=> [
  ['分层', [{t:'外观', s:3}], '分层', '',['无','轻微','明显']],
  ['沉淀', [{}], '沉淀', '',['无','轻微','明显']],
  ['乳化', [{}], '乳化', '',['无','轻微','明显']],
  ['黏QBC', [{t:'运动黏度(40℃)/(mm²/s)', s:3}], <>L-QB，L-QC</>, '',['＜40','40～50','＞50']],
  ['黏QD', [{}], 'L-QD', '',['＜40','40～60','＞60']],
  ['黏其它', [{}], '其它', '',[ ]],
  ['酸值', [], '酸值[ mg/g（以KOH计）]', '',['＜0.5','0.5～1.5','＞1.5']],
  ['残炭', [], '残 炭（%）', '',['＜1.0','1.0～1.5','＞1.5']],
  ['闭闪点', [], '闭口闪点（℃）', '',['≥100','＞60～＜100','≤60']],
  ['水分', [], '水分（mg/kg）', '',['＜500','500~1000','＞1000']],
  ['馏出温', [], '5%低沸物馏出温度a（℃）', '',['＞在用有机热载体最高工作温度','≤在用有机热载体最高工作温度','≤在用有机热载体系统的回流温度']],
  ['低沸含', [], '低沸物含量b(%)(体积分数)', '',['≤2','＞2～≤5','＞5']],
];
//源于上面setConfig配置
const dividor=[4,5];

export const items水质检 =setConfig水质(undefined);
export const itemA水质检: string[] = [ ];
items水质检.forEach(([name, title, initIsp], i: number) => {
  itemA水质检.push(name as string);
});
//未定义的就采用缺省取值吧； 存储到rep
const defaultValCb= (par: any)=>{
  items水质检.forEach(([name1 , _,item,unit,defs ], i: number) => {
    const name=name1 as string;
    const [biaoz,warn,stop]=defs as any;
    if(biaoz ){
      let useob=par?.[name];
            //biaoz标准值：带默认值的； 可能更多字段；
      const mergob={b:biaoz,w:warn,s:stop,   ...useob};
      par[name]=mergob;
    }
  });
  return  par;
}
const 检测结果选=['未检出','无','轻微','明显','≤0.0'];
const 判定选=['允许使用','安全警告','停止使用','—',];
export const WaterQuality =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA水质检, defaultValCb);
      const titNode=useOmnipotentPrefTitle({config:items水质检});
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>

            {items水质检.map(([name, cfgs, item, unit,[biaoz,yunxu,tiaoj]]: any, i: number) => {
              const {t:group}=cfgs?.[0] || {t:undefined};
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]} &nbsp;
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;
                    <BlobInputList value={inp?.[name]?.b ?? ''}
                                   style={{display: 'inline-flex', width: inp?.[name]?.b?.length>8? '17rem':'7rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 'b', v || undefined, inp, setInp)}/>
                    {unit}允许使用
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;
                    <BlobInputList value={inp?.[name]?.w ?? ''}
                                   style={{display: 'inline-flex', width: inp?.[name]?.w?.length>8? '17rem':'7rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 'w', v || undefined, inp, setInp)}/>安全警告
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;
                    <BlobInputList value={inp?.[name]?.s ?? ''}
                                   style={{display: 'inline-flex', width: inp?.[name]?.s?.length>8? '17rem':'7rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 's', v || undefined, inp, setInp)}/>停止使用。
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;检验结果
                    <BlobInputList value={inp?.[name]?.r ?? ''} datalist={检测结果选}
                                   style={{display: 'inline-flex', width: '7rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                    {unit}
                  </div>

                  {dividor.includes(i)? null :
                      <div css={{display: 'inline-flex', alignItems: 'center'}}>
                        &nbsp;{3===i && '运动黏度-'}单项质量判定
                        <BlobInputList value={inp?.[name]?.P ?? ''} datalist={判定选}
                                       style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                       onListChange={v => objNestSet(name, 'P', v || undefined, inp, setInp)}/>
                      </div>
                  }
                </div>
              </React.Fragment>);
            })}
            {tail注解}
            {children}
          </InspectRecordLayout>
      );
});

//需要特殊处理 span合并项目：
const itemRender=(orc: any, name:string,i:number,item:any,xmcspan:number,unit:any)=><>
  <CCell colSpan={xmcspan}>{item}</CCell>
  <CCell>{orc?.[name]?.b??'／'}</CCell>
  <CCell>{orc?.[name]?.w??'／'}</CCell>
  <CCell>{orc?.[name]?.s??'／'}</CCell>
  <CCell>{orc?.[name]?.r??'／'}</CCell>
  { 3===i? <CCell rowSpan={3}>{orc?.[name]?.P??'—'}</CCell> :
      dividor.includes(i)? null :
          <CCell>{orc?.[name]?.P??'—'}</CCell>
  }
</>;

export const WaterQualityVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const configNew =React.useMemo(()=>setConfig水质(orc),[orc]);
  const [render]=useOmnipotentPrefItspe({orc, config:configNew,
                  itemRender, pcols:1, noNo:true, unitCel:false});
  return <>
    <div css={{"@media print": {paddingBottom: '6rem', pageBreakInside: 'avoid'}} }>
    </div>
    <Table id={'WaterQuality'} fixed={ ["10%","13.3%","15%","15%","15.5%","%","12.1%"]  }
             css={{borderCollapse: 'collapse', "@media print": {marginTop: '-6rem'}}} tight  miniw={800}>
      <TableHead>
        <TableRow>
          <CCell colSpan={2}>检验项目</CCell><CCell>允许使用</CCell><CCell>安全警告</CCell>
          <CCell>停止使用</CCell><CCell>检验结果</CCell><CCell>单项质量判定</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={"WaterQuality"}>
          {render}
        </RepLink>
      </TableBody>
    </Table>
  </>;
};
